<template>
  <view>
    <mt-navbar title="易盟产品" :show-back="false" bg-color="#1484EE" left-icon-color="#ffffff" :title-style="{ color: '#ffffff' }">
      <template #right>
        <!--暂时屏蔽消息模块-->
        <!-- <mt-message-bell color="white"> </mt-message-bell> -->
      </template>
    </mt-navbar>
    <view class="left-box">
      <scroll-view class="h-full" scroll-y :show-scrollbar="false">
        <view :style="{ height: commonStore.systemInfo.statusBarHeight + 'px' }"></view>
        <view
          v-for="item in firstArr"
          :key="item.id"
          class="left-item"
          :class="{ active: currentFirst === item.id }"
          @click="handleChangeFirst(item)"
          >{{ item.productCategoryName }}</view
        >
      </scroll-view>
    </view>
    <view class="right-box">
      <scroll-view class="h-full" scroll-y :show-scrollbar="false" @scrolltolower="getData">
        <view :style="{ height: commonStore.systemInfo.statusBarHeight + 'px' }"></view>
        <view v-for="son in dataList" :key="son.id" class="list-li mx-32rpx py-32rpx">
          <view class="flex items-center">
            <view class="flex-1 min-w-0">
              <view class="text-32rpx text-#1A1A1A font-bold break-all">{{ son.productName }}</view>
              <view class="text-28rpx text-#EFB339 mt-16rpx break-all">{{ son.brokerageRule }}</view>
            </view>
            <view
              v-if="user.userInfo.pointFlag !== 1 && user.userInfo.serviceProviderFlag && user.userInfo.serviceProviderActiveFlag"
              class="pl-10rpx"
            >
              <mt-button class="apply-btn" shape="circle" size="mini" :shake="false" @click="handleJoinProduct(son)">
                <uv-icon name="plus" color="#ffffff" size="28rpx"></uv-icon>
                <text class="ml-8rpx">加入</text>
              </mt-button>
            </view>
          </view>
          <view class="text-28rpx text-#727687 mt-32rpx break-all clamp2">{{ son.remark }}</view>
        </view>
        <view v-if="!dataList.length" class="pt-300rpx">
          <mt-empty-view></mt-empty-view>
        </view>
      </scroll-view>
    </view>

    <mt-button v-if="user.userInfo.pointFlag !== 1 && user.userInfo.serviceProviderFlag" class="add-btn" :shake="false" @click="handleAddProduct">
      <image class="w-40rpx h-40rpx mr-8rpx" src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-add1.svg"></image>
      <text>新增产品</text>
    </mt-button>
    <mt-tabbar :current="1"></mt-tabbar>
  </view>
</template>

<script setup>
import {
  productCategorygetProductCategoryStatisticsListApp,
  productgetProductPageAppV2,
  providerProductApplyaddOrUpdateProviderProductAppV2
} from '@/api/mixed';
import userStore from '@/store/user';
import useCommonStore from '@/store/common';

const user = userStore();
const commonStore = useCommonStore();

function handleChangeFirst(item) {
  dataList.value = [];
  currentFirst.value = item.id;
  const obj = firstArr.value.find((son) => son.id === item.id);
  twoArr.value = obj.children;
  currentTwo.value = obj.children[0].id;
  flag.value = false;
  haveData.value = true;
  queryParams.value.pageNum = 1;
  queryParams.value.lastId = '';
  getData();
}

const firstArr = ref([]);
const currentFirst = ref('');
const twoArr = ref([]);
const currentTwo = ref();

async function getFirstData() {
  const res = await productCategorygetProductCategoryStatisticsListApp();
  firstArr.value = res.data;
  currentFirst.value = res.data[0].id;
  twoArr.value = res.data[0].children;
  currentTwo.value = res.data[0].children[0].id;

  getData();
}

const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  lastId: ''
});
const dataList = ref([]);

// 是否在下拉加载数据中
const flag = ref(false);
// 是否还有数据了
const haveData = ref(true);
function getData() {
  if (flag.value) return;
  if (!haveData.value) return;
  flag.value = true;
  productgetProductPageAppV2({
    ...queryParams.value,
    productCategoryId: currentTwo.value
  })
    .then((res) => {
      const list = res.data?.items || [];
      if (list.length > 0) {
        if (list.length < queryParams.value.pageSize) {
          haveData.value = false;
        }
        queryParams.value.pageNum = queryParams.value.pageNum + 1;
        flag.value = false;
        dataList.value = dataList.value.concat(list);
        queryParams.value.lastId = list[list.length - 1]?.id;
      } else {
        haveData.value = false;
        flag.value = false;
      }
    })
    .catch(() => {
      flag.value = false;
      haveData.value = true;
    });
}

function handleAddProduct() {
  uni.navigateTo({
    url: '/subProduct/pages/add'
  });
}

async function handleJoinProduct(row) {
  await providerProductApplyaddOrUpdateProviderProductAppV2({ productId: row.id });

  flag.value = false;
  haveData.value = true;
  queryParams.value.pageNum = 1;
  queryParams.value.lastId = '';
  dataList.value = [];

  getData();
  // uni.setStorageSync('product', {
  //   productCategoryParentId: row.productCategoryParentId,
  //   productCategoryParentName: row.productCategoryParentName,
  //   productCategoryId: row.productCategoryId,
  //   productCategoryName: row.productCategoryName,
  //   productName: row.productName
  // });
  // uni.navigateTo({
  //   url: `/subProduct/pages/join?productId=${row.id}`
  // });
}

onLoad(() => {
  dataList.value = [];
  flag.value = false;
  haveData.value = true;
  twoArr.value = [];
  currentTwo.value = '';
  getFirstData();
  uni.setNavigationBarColor({
    frontColor: '#ffffff',
    backgroundColor: '#1484EE'
  });
});
</script>

<style lang="scss" scoped>
.left-box {
  position: fixed;
  left: 0;
  top: 44px;
  bottom: 50px;
  width: 204rpx;
  padding-bottom: env(safe-area-inset-bottom);
  background-color: #f7f7f7;
  z-index: 2;
  .left-item {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 100rpx;
    font-size: 28rpx;
    color: #1c213e;
    padding: 20rpx 32rpx;
    word-break: break-all;
    box-sizing: border-box;
    &.active {
      background-color: #ffffff;
      &::after {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 4rpx;
        height: 28rpx;
        background-color: #1484ee;
      }
    }
  }
}
.right-box {
  position: fixed;
  left: 204rpx;
  right: 0;
  top: 44px;
  bottom: 50px;
  padding-bottom: env(safe-area-inset-bottom);
  background-color: #ffffff;
  z-index: 2;
  .list-li {
    border-bottom: 2rpx solid #e6e6e6;
    &:last-child {
      border-bottom: 0;
    }
    .apply-btn.mt-button {
      font-size: 28rpx;
      padding: 16rpx 16rpx;
    }
  }
}

.add-btn.mt-button {
  position: fixed;
  left: 50%;
  bottom: calc(80px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 10;
}
</style>
